<template>
  <el-dialog
      v-bind="$attrs"
      v-model="dialog.visible"
      :title="dialog.title"
      :close-on-click-modal="false"
      destroy-on-close
      @close="handleClose"
  >
    <el-row class="detail-copy">
      <el-col v-for="item in fields" :key="item.value" :span="item.span ?? colSpan ?? 8">
        <div class="el-form-item px-4">
          <label class="el-form-item__label" :style="{ width: labelWidth ?? '100px' }">
            <span>{{ item.label }}</span>
          </label>
          <div
              class="el-form-item__content flex justify-between"
              :style="item.style"
              :class="item.className"
              :id="item.value">
                        <span v-if="item.type === 'time'">
                            {{ dayjs(row[item.value]).format(item.format ?? 'YYYY-MM-DD HH:mm:ss') }}
                        </span>
            <span v-else-if="item.type === 'function'">
                            {{ item.func(row) ?? '' }}
                        </span>
            <span v-else>{{ row[item.value] ?? '' }}</span>
            <c-icon class="cursor-pointer" name="copyDocument" @click="copy(item.value)" />
          </div>
        </div>
      </el-col>
    </el-row>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';

type Fields = {
  label: string;
  value: string | number;
  span?: number;
  style?: string | object;
  className?: string | any[];
  type?: 'time' | 'function';
  format?: string;
  func?: (row: any) => string | number;
};

interface IProps {
  fields: Fields[];
  colSpan?: number;
  labelWidth?: string;
}

const props = defineProps<IProps>();

const row = ref({});

const dialog = reactive({
  visible: false,
  title: '详情'
});

const copy = (id: string) => {
  const ele = document.querySelector(`#${id} span`) as HTMLSpanElement;
  // window.copyClipboard(ele.innerHTML);
};
// 关闭弹窗
const handleClose = () => {
  dialog.visible = false;
};
const handleOpen = (item: Record<string, any>) => {
  dialog.visible = true;
  row.value = Object.assign(row.value, item);
};

defineExpose({
  open: handleOpen
});
</script>

<style lang="scss" scoped>
.detail-copy {
  .el-form-item__content {
    span {
      font-size: 14px;
      font-weight: 400;
      color: #010a0f;
    }
  }
}
</style>
